<template>
    <div class="profile-page">
      <!-- Main Content -->
      <main class="main-content">
        <!-- Personal Info Card -->
        <section class="personal-info" @click="openDrawer">
          <el-avatar :size="80" :src="user.avatarUrl"></el-avatar>
          <h2>{{ user.username }}</h2>
          <p>{{ user.signature || '这个人很懒，什么都没有留下...' }}</p>
          <el-button @click="addFriend(user.userId)">添加关注</el-button>
        </section>
  
        <!-- Latest Posts List -->
        <section class="item" v-for="(form, index) in forms" :key="form.id || index">
          <div class="circle">
            <img :src="form.user_avatar"/>
          </div>
          <div class="title">
            <h1>{{ form.title }}</h1>
            <!-- <p>{{ form.createdAt }}</p> -->
          </div>
          <div class="content" @click="clickpost(form.post_id)">
            <p>{{ form.mainboby }}</p>
            <!-- 图片没有显示 -->
            <!-- <div class="img">
              <img :src="form.user_avatar"/>
            </div> -->
          </div>
        </section>
  
        <!-- Other Sections -->
        <!-- ... -->
      </main>
    </div>
  </template>
  
  <script>
export default {
  data() {
    return {
      user: {},
      forms: [], // 用户帖子列表
      isAuthenticated: false,
      drawer: false,
      userData: {},
    };
  },
  created() {
    this.loadUserInfo();
  },
  watch: {
    '$route.params.id': {
      handler(newVal) {
        if (newVal) {
          this.loadUserInfo();
        }
      },
      immediate: true // 立即触发一次监听器
    }
  },
  methods: {
    loadUserInfo() {
      const userId = this.$route.params.id; // 使用 $route.params 获取 ID
      console.log('Received ID:', userId); // 添加日志来验证ID是否正确传递
      this.request.get(`/users/${userId}`).then(res => {
        if (res.code === 1) {
          this.user = res.data;
          this.userData = { ...res.data }; // 确保 userData 和 user 同步
          this.isAuthenticated = true;
          this.loadPosts(); // 在用户信息加载完成后加载帖子列表
        }
      }).catch(err => {
        console.error('Failed to load user info', err);
      });
    },
    loadPosts() {
      this.request.post("/originalposts/list").then(res => {
        if (res.code === 1) {
          this.forms = res.data;
          console.log('Loaded posts:', res.data);
        }
      }).catch(err => {
        console.error('Failed to load posts', err);
      });
    },
    clickpost(postId) {
      this.$router.push(`/detail/${postId}`);
      console.log("跳转路由");
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    },
    addFriend(id) {
      // 实现添加好友逻辑...
      this.request.post(`/friends/${id}`).then(res => {
        if(res.code==1){
            this.$alert(res.data);
        }
      })
    },
    openDrawer() {
      this.drawer = true;
    }
  }
};
</script>
  
  <style scoped>
  /* Ensure profile-page does not have unnecessary margins */
  .profile-page {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    height: 100vh;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
    margin-left: 15px;
    border-radius: 10px;
    background-color: white;
  }
  
  /* Personal Info Card */
  .personal-info {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 2rem;
    cursor: pointer;
  }
  
  .personal-info .el-avatar {
    border: 2px solid #ddd;
    margin-bottom: 1rem;
  }
  
  .personal-info h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  .personal-info p {
    color: #666;
    margin-bottom: 1rem;
  }
  
  .personal-info .el-button {
    background-color: #286090;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .personal-info .el-button:hover {
    background-color: #1c4a70;
  }
  
  /* Latest Posts List */
  .latest-posts {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .latest-posts ul {
    list-style: none;
    padding: 0;
  }
  
  .latest-posts li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .latest-posts li:last-child {
    border-bottom: none;
  }
  
  .latest-posts a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    flex-grow: 1;
  }
  
  .latest-posts span {
    color: #666;
    font-size: 0.9rem;
  }
  
  .latest-posts .el-button {
    background-color: transparent;
    color: #286090;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .latest-posts .el-button:hover {
    color: #1c4a70;
  }

  /* 修改与抽屉相关的样式 */
.avatar {
  width: 180px;
  height: 180px;
  display: block;
  margin: 0 auto;
}

.el-drawer__body {
  padding: 16px;
}

.el-form-item {
  margin-bottom: 16px;
}

.item {
    margin: 15px;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto 1fr;
    gap: 10px;
    background-color: white;
    padding: 10px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); /* 简单阴影 */
    border-radius: 10px; /* 所有角都是10px的圆角 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
  }

  .item:hover .circle,
.item:hover .title,
.item:hover .content {
  opacity: 0.8; /* 悬停时稍微降低透明度 */
}

.item:hover {
  transform: scale(1.05); /* 放大 */
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.75); /* 更强的阴影 */
}

  .circle {
  position: relative;
  width: 60px; /* 设置你想要的宽度 */
  height: 60px; /* 设置你想要的高度 */
  border-radius: 50%; /* 创建圆形 */
  overflow: hidden; /* 隐藏超出部分 */
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); /* 简单阴影 */
}

.circle img {
  width: 100%; /* 让图片宽度与父容器相同 */
  height: 100%; /* 让图片高度与父容器相同 */
  object-fit: cover; /* 确保图片覆盖整个区域而不变形 */
  display: block; /* 去除底部空隙 */
}
  
  
  .title {
    height: 10px;
    padding-left: 10px;
  }
  
  .content {
    height: 80px;
    width: 700px;
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */
  }

  .content img {
  width: 100%; /* 让图片宽度与父容器相同 */
  height: 100%; /* 让图片高度与父容器相同 */
  object-fit: cover; /* 确保图片覆盖整个区域而不变形 */
  display: block; /* 去除底部空隙 */
}


  .img{
    width: 100px;
    height: 80px;
    background-color:aliceblue;
    float: right;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); /* 简单阴影 */
    border-radius: 10px; /* 所有角都是10px的圆角 */
  }

  /* Additional sections */
.additional-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-item {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex: 1 1 calc(25% - 1rem); /* Adjust as needed */
  min-width: 200px;
}

.section-item h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.section-item ul {
  list-style: none;
  padding: 0;
}

.section-item li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.section-item li:last-child {
  border-bottom: none;
}

.section-item span {
  color: #666;
  font-size: 0.9rem;
}

/* Ensure profile-page does not have unnecessary margins */
.profile-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  margin: 0;
}

/* Additional sections */
.additional-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-item {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex: 1 1 calc(25% - 1rem); /* Adjust as needed */
  min-width: 200px;
}

.section-item h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Content wrapper for aligning text and buttons */
.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.buttons-containers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.buttons-containers .el-button {
  margin-bottom: 0.5rem; /* Add some space between buttons */
}
  </style>